import * as THREE from "three";

import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";

const meshGroup = new THREE.Group();
const loader = new GLTFLoader();

const dracoLoader = new DRACOLoader();
// 设置DRACO解码器的路径, 这个路径存放着DRACO解码器的JavaScript文件，
// 可以从URL_ADDRESS// 可以从https://github.com/google/draco/releases下载。
dracoLoader.setDecoderPath(
	"https://www.gstatic.com/draco/versioned/decoders/1.5.7/"
);
loader.setDRACOLoader(dracoLoader);

const url1 = "/assets/model/glTF/CesiumMan.gltf";
const url2 = "/assets/model/glTF-Embedded/CesiumMan.gltf";
const url3 = "/assets/model/glTF-Binary/CesiumMan.glb";
const url4 = "/assets/model/glTF-Draco/Michelle-draco.glb";

loader.load(url1, function (gltf) {
	console.log(gltf);
	meshGroup.add(gltf.scene);
	gltf.scene.scale.set(5, 5, 5); // 缩放模型

	gltf.scene.traverse((obj) => {
		if (obj.isMesh) {
			console.log(obj.name, obj);
			obj.material.wireframe = true;
			obj.material.map = null;
		}
	});
});

loader.load(url2, function (gltf) {
	console.log(gltf);
	meshGroup.add(gltf.scene);
	gltf.scene.scale.set(5, 5, 5); // 缩放模型
	gltf.scene.translateX(-5);

	gltf.scene.traverse((obj) => {
		if (obj.isMesh) {
			console.log(obj.name, obj);
			obj.material.wireframe = true;
			obj.material.map = null;
			obj.material.color.set("skyblue");
		}
	});
});

loader.load(url3, function (gltf) {
	console.log(gltf);
	meshGroup.add(gltf.scene);
	gltf.scene.scale.set(5, 5, 5); // 缩放模型
	gltf.scene.translateX(5);

	gltf.scene.traverse((obj) => {
		if (obj.isMesh) {
			console.log(obj.name, obj);
			obj.material.wireframe = true;
			obj.material.map = null;
			obj.material.color.set("lightgreen");
		}
	});
});

loader.load(url4, function (gltf) {
	console.log(gltf);
	meshGroup.add(gltf.scene);
	gltf.scene.scale.set(5, 5, 5); // 缩放模型
	gltf.scene.translateX(10);

	// 添加包围盒辅助器
	const boxHelper = new THREE.BoxHelper(gltf.scene, "pink");
	meshGroup.add(boxHelper);
	const box = new THREE.Box3();
	box.expandByObject(gltf.scene);
	const width = box.max.x - box.min.x;
	const height = box.max.y - box.min.y;
	const depth = box.max.z - box.min.z;
	console.log("模型大小：", {
		width: width,
		height: height,
		depth: depth,
	});

	
	gltf.scene.traverse((obj) => {
		if (obj.isMesh) {
			console.log(obj.name, obj);
			// obj.material.wireframe = true;
			// obj.material.map = null;
			// obj.material.color.set('lightgreen');
		}
	});
});

export { meshGroup };
